<template>
    <div>
        <el-carousel :interval="4000" type="card" height="400px">
            <el-carousel-item v-for="item in bannerList" :key="item.url">
                <img :src="item.url"/>
            </el-carousel-item>
        </el-carousel>
        <!--通知框-->
        <el-card class="mainNotice">
            <div>
                <div>
                    <h1>通知 公告</h1>
                </div>
                <el-link class="gengduo" @click="$router.push('/system/notice')"
                >查看详情-->
                </el-link
                >
                <el-divider content-position="left" class="xmx">详情</el-divider>
            </div>
            <div v-for="item in noticeList" :key="item.noticeId" class="noteice">
                <el-link target="_blank" @click="$router.push('/system/notice')">
                    {{ item.noticeTitle }}
                    <div>发布于：{{ item.createTime | dateFormat2 }}</div>
                </el-link>
            </div>
        </el-card>
        <!--右下角框-->
        <el-card class="mianright">
            <!-- 收支概况统计表 -->
            <div class="chart">
                <div class="statistics" id="total"></div>
                <div class="statistics" id="income"></div>
                <div Id="totalFlow"><h1>总流水</h1></div>
                <el-link id="flowDetails" @click="$router.push('/statistics/revenue')"
                >查看详情→
                </el-link
                >
            </div>
        </el-card>
    </div>
</template>

<script>
import {getAllBanner} from "@/apis/mian/main";
import {getNoticeList} from "@/apis/system/notice";
import {queryAllRevenueData} from "@/apis/statistics/revenue";
import * as echarts from "echarts";

export default {
//自定义页面数据
    data() {
        return {
            // 遮罩
            loading: false,
            // 查询参数
            queryParams: {
                dateRange: undefined,
            },
            payTotalPriceList: [],
            backAllBackSaleList: [],
            totalIncome: 0,
            bannerList: [],
            noticeList: [],
            //总退费
            backIncome: 0,
            //现金支付
            cashIncome: 0,
            //支付宝支付
            alipayIncome: 0,
            //现金退费
            cashRefund: 0,
            //支付宝退费
            alipayRefund: 0,
            //微信支付
            wecharIncome: 0,
            //微信退费
            wecharRefund: 0,
        }
    },
    mounted() {
        this.getMain()

    },
    //方法
    methods: {
        //进入主页面展示
        getMain() {
            getAllBanner().then(res => {
                this.bannerList = res?.data
            })
            getNoticeList().then(res1 => {
                this.noticeList = res1?.data
            })

            var self = this;
            queryAllRevenueData(this.queryParams)
                .then((res2) => {
                    console.log(res2);
                    // //总收入
                    let total = res2.data[0];
                    let info = res2.data[1];
                    this.totalIncome = total[0].totalIncome;
                    this.backIncome = total[1].totalBack;
                    this.wecharIncome = info[2].wechar;
                    this.cashRefund = info[3].back;
                    this.alipayRefund = info[4].backAl;
                    this.wecharRefund = info[5].backwechar;
                    var myChart = echarts.init(document.getElementById("total"));
                    var myChart1 = echarts.init(document.getElementById("income"));

                    let option = {
                        title: {
                            text: "收支概况",
                            left: "center",
                        },
                        tooltip: {
                            trigger: "item",
                        },
                        legend: {
                            orient: "vertical",
                            left: "left",
                        },
                        series: [
                            {
                                name: "收支概况",
                                type: "pie",
                                radius: "50%",
                                data: [
                                    {value: total[0].totalIncome, name: "总收入"},
                                    {value: total[1].totalBack, name: "总退费"},
                                ],

                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: "rgba(0, 0, 0, 0.5)",
                                    },
                                },
                            },
                        ],
                    };
                    myChart.setOption(option);

                    //=========收入渠道表格=====
                    let option1 = {
                        title: {
                            text: "收入渠道",
                            left: "center",
                        },
                        tooltip: {
                            trigger: "item",
                        },
                        //小标签
                        legend: {
                            orient: "vertical",
                            right: "right",
                        },
                        series: [
                            {
                                name: "收入渠道",
                                type: "pie",
                                radius: "50%",
                                data: [
                                    {value: info[0].pay, name: "现金支付"},
                                    {value: info[1].payAl, name: "支付宝支付"},
                                    {value: info[2].wechar, name: "微信支付"},
                                    {value: info[3].back, name: "现金退费"},
                                    {value: info[4].backAl, name: "支付宝退费"},
                                    {value: info[5].backwechar, name: "微信退费"}
                                ],

                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: "rgba(0, 0, 0, 0.5)",
                                    },
                                },
                            },
                        ],
                    };
                    myChart1.setOption(option1);
                })
                .catch(() => {
                    this.msgError("查询失败");
                    this.loading = false;
                });
        },
    },
};
</script>

<style scoped>
#app {
    /*border: 1px solid red;*/
    /*height: 800px;*/
    /*width: 1640px;*/
}

#flowDetails {
    position: absolute;
    top: 200px;
    right: 40px;
    font-size: 20px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

#totalFlow {
    position: absolute;
    right: 55%;
    top: -10px;
    font-size: 30px;
}

.chart {
    display: flex;
}

.statistics {
    width: 500px;
    height: 250px;
    margin: 30px 0px;
}

#total {
    width: 40%;
    margin-left: 5px;
}

#income {
    margin-right: 50px;
}

.noteice {
    position: relative;
    top: -30px;
    margin-bottom: 10px;
}

.xmx {
    position: relative;
    top: -30px;
}

.gengduo {
    position: relative;
    top: -30px;
    left: 80%;
    /*right: -650px;*/
}

.mianright {
    position: relative;
    top: -300px;
    left: 5%;
    width: 67%;
    height: 300px;
    margin-left: 29%;
}

.mainNotice {
    height: 300px;
    width: 33%;


}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 40%;
    margin: 600px;
}

</style>